<template>
	<view class="container">
		<!-- 自定义头部栏，需要"navigationStyle": "custom" -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-title">用钱途 有前途</view>
			</view>
		</view>
		<view class="main-content">
			<!--选择模式 （暂时不用）-->
			<view class="mode-bar">
				<view class="mode">
					<!-- <text class="mode-item" :class="{ 'selected' : mode == 'time' }" @tap="handlerChangeMode('time')">酒后代驾时间模式</text> -->
					<!-- <text class="mode-item" :class="{ 'selected' : mode == 'distance' }" @tap="handlerChangeMode('distance')">酒后代驾里程模式</text> -->
				</view>
				<!-- <view class="more" @tap="showMore">
					<text>更多 </text>
					<uni-icons type="down" size="15"></uni-icons>
				</view> -->
			</view>
			<!--content-->
			<view class="content">
				<!--当前位置和目的地卡片-->
				<view class="location-and-target">
					<!-- 呼叫代驾，呼叫跑腿模式 -->
					<view class="content-field">
						<view class="service-tabs">
							<view class="tab-item" :class="{ 'active': selectedService === '代驾' }" @click="selectService('代驾')">
								<text class="iconfont icon-daijia"></text>
								<text class="tab-text">代驾</text>
							</view>
							<view class="tab-item" :class="{ 'active': selectedService === '跑腿' }" @click="selectService('跑腿')">
								<text class="iconfont icon-paotui"></text>
								<text class="tab-text">跑腿</text>
							</view>
						</view>
					</view>
					
					<!--现在呼叫 或 选择时间 (最多3天内)-->
					<view class="call">
						<uni-datetime-picker 
							type="datetime" 
							v-model="startDatetime"
							hide-second
							:start="selectableStartTime"
							:end="selectableEndTime"
						>
							<text v-if="startDatetime === selectableStartTime">现在呼叫</text>
							<text v-else>{{ formatDatetime(startDatetime) }}</text>
							<uni-icons type="right" size="15" color="#19afff"></uni-icons>
						</uni-datetime-picker>
					</view>
					<!--当前位置-->
					<view class="location" @tap="handlerSelectCurrent">
						<view class="left">
							<uni-icons type="location" size="15" color="#409EFF"></uni-icons>
							出发: {{ getCurrentPOI(currLocation) }}
						</view>
						<view class="right" @tap.stop="getCurrLocation"><!-- 阻止事件冒泡@tap.stop -->
							<uni-icons type="reload" size="15"></uni-icons>
						</view>
					</view>
					<!--想去哪里-->
					<view class="target" @tap="handlerSelectTarget">
						<view class="left">
							<uni-icons type="flag" size="15" color="#F56C6C"></uni-icons>
							{{ targetLocation.title ? targetLocation.title : '你想去哪里' }}
						</view>
					</view>
					<!--底部（暂时不要）-->
					<!-- <view class="card-foot">
						<view>
							<uni-icons type="person" size="15"></uni-icons>
							{{ driverCount ? `${driverCount}名司机` : `暂无在线司机` }}
						</view>
						<view>
							<uni-icons type="heart" size="15"></uni-icons>
							帮朋友叫
						</view>
					</view> -->
				</view>
				<!--起步价-->
				<view class="price">
					<view class="left">
						<text class="text">起步价</text>
						<text class="num">￥{{ formatAmount(startPrice) }}</text>
						<view class="question" @tap="gotoAboutPage">
							<uni-icons type="help" size="18"></uni-icons>
						</view>
					</view>
					<view class="right" v-if="distancePrice">
						<text class="text">总价</text>
						<text class="num">￥{{ mode === 'time' ? formatAmount(durationPrice) : formatAmount(distancePrice) }}</text>
					</view>
				</view>
				<!--预计 和 当前订单-->
				<view class="curr-order">
					<view class="left">
						<text v-if="distance && duration">预计: {{ formatDistance(distance) }} / {{ formatDuration(duration) }}</text>
					</view>
					<view class="right" @tap="dialogConfirm" v-if="num > 0">
						<view><uni-icons type="shop" size="18"></uni-icons></view>
						<view>当前订单</view>
						<view class="num">{{ num }}</view>
					</view>
				</view>
				<!--下单按钮-->
				<view class="btn" @tap="handlerSubmit">
					立即下单
				</view>
				<!--广告位-->
				<view class="more">
					<view class="left">
						<view class="left-top">
							<image src="@/static/imgs/jkms.jpg" mode="aspectFill"></image>
						</view>
						<view class="left-bottom">
							<image src="@/static/imgs/jkdyf.jpg" mode="aspectFill"></image>
						</view>
					</view>
					<view class="right">
						<view class="right-top">
							<image src="@/static/imgs/jkkp.jpg" mode="aspectFill"></image>
						</view>
						<view class="right-bottom">
							<image src="@/static/imgs/jkwz.jpg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--未支付弹窗-->
		<uni-popup ref="dialogRef" type="dialog">
			<uni-popup-dialog 
				type="info" 
				cancelText="取消" 
				:confirmText="popupInfo.confirmText" 
				title="温馨提示" 
				:content="popupInfo.content" 
				@confirm="dialogConfirm"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { MAP } from '@/utils/qq-map-wx.js'

import { saveOrder, getInProgress,calcPriceByDistance } from '@/api/order.js'
import { getOnlineDriverCount } from '@/api/driver.js'
import { getOpenid, hasRegistered, login } from '@/api/user.js'
import { orderTypeEnum } from '@/utils/orderType'
import { formatDatetime } from '@/utils/datetimeUtil.js'
import { formatDistance, formatDuration } from '@/utils/kmUtil.js'
import { register } from '@/api/user.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { setToken } from '@/utils/auth.js'
import { useUserStore } from '@/stores/userStore.js'



const currentUser = useUserStore()

/* 代驾 跑腿的选择 */
const selectedService = ref('代驾')
const selectService = (service) => {
	selectedService.value = service
}

// 用户信息
const userinfo = ref({
	openId: ''
})
// 弹窗提示信息
const popupInfo = ref({
	confirmText: '',
	content: ''
})

const driverCount = ref(0)

// 计价模式
const mode = ref('distance')
// 当前未完成订单数量
const num = ref(0)
// 未完成的订单信息
const inProgressOrder = ref({})
// 起步价
const startPrice = ref(1800)
// 总价
const distancePrice = ref(0)
const durationPrice = ref(0)
// 距离
const distance = ref(0)
// 时间
const duration = ref(0)

// 当前位置
const currLocation = ref({
	latitude: 39.906036,   // 维度
	longitude: 116.397697, // 经度
	altitude: 0,           // 高度
	addressInfo: {
		fullname: '',      // 地址全名
		nation: '',        // 国家
		province: '',      // 省
		city: '',          // 市
		district: '',      // 区
		street: '',        // 街道
		streetNumber: ''   // 街道编号
	}
})
// 目的地位置
const targetLocation = ref({})

// 当前时间
const nowDatetime = new Date().getTime()
// 最早出发时间
const selectableStartTime = nowDatetime
// 最晚出发时间
const selectableEndTime = nowDatetime + ( 1000 * 60 * 60 * 24 * 3 )
// 选择的出发时间
const startDatetime = ref(nowDatetime)

// 未支付订单弹窗
const dialogRef = ref(null)

// 展示更多
function showMore () {
	console.log()
}
// 跳转收费标准页面
function gotoAboutPage () {
	uni.navigateTo({
		url: '/pages/index/about'
	})
}

// 微信登录
function wxLogin () {
	return new Promise((resolve, reject) => {
		// 微信登录
		wx.login({
			success: function (res) {
				// 换取openid
				getOpenid(res.code).then(resp => {
					// openid
					userinfo.value.openId = resp.data
					// 查询是否注册过
					hasRegistered(userinfo.value.openId).then(response => {
						if (response.data === false) {
							// 直接注册
							register({
								openId: userinfo.value.openId,
								username: `小程序用户${userinfo.value.openId.substring(0, 5)}`
							}).then(res => {
								// 登录
								djUserLogin().then(() => {
									resolve()
								}).catch(() => {
									reject()
								})
							})
						} else {
							// 登录
							djUserLogin().then(() => {
								resolve()
							}).catch(() => {
								reject()
							})
						}
					})
				}).catch(e => {
					uni.showModal({
						title: '登录失败，请您退出小程序后重新进入' + JSON.parse(e)
					})
					reject(e)
				})
			},
			fail: function (err) {
				console.log('微信登录失败')
				reject(err)
			}
		})
	})
}
// 代驾系统小程序登录
function djUserLogin () {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			mask: true,
			title: '登录中...'
		})
		login(userinfo.value.openId).then(res => {
			uni.hideLoading()
			setToken(res.data)
			currentUser.refreshCurrentUser()
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			})
			// 查询是否有未完成订单
			initHaveInProgress()
			resolve()
		}).catch(err => {
			uni.hideLoading()
			reject()
		})
	})
}
// 查询是否有正在执行的订单
function initHaveInProgress () {
	return new Promise((resolve, reject) => {
		getInProgress().then(res => {
			if (res.data !== null) {
				num.value = 1
				inProgressOrder.value = res.data
			}
			resolve()
		}).catch(err => {
			reject()
		})
	})
}

// 获取当前位置
function getCurrLocation () {
	// uni.showLoading({
	// 	title: '获取定位中',
	// 	mask: true
	// })
	uni.getLocation({
		type: 'gcj02',
		altitude: true,       // 需要高度
		isHighAccuracy: true, // 高精度
		success: function (res) {
			const { latitude, longitude, altitude } = res
			// 给经度纬度高度赋值
			setLatLngAlt(latitude, longitude, altitude)
			// 查询当前位置信息
			MAP.reverseGeocoder({ 
				location: { latitude, longitude },
				get_poi: 1, //获取周边poi信息
				poi_options: "policy=2;radius=100", // 获取最近poi
				success: (addr) => {
					// 设置当前地址信息
					setAddress(addr.result)
					// 如果已选择目的地，更换当前位置时，重新计算价格
					if (targetLocation.value.location) {
						recalculatePrice()
					}
				},
				fail: (e) => {
					console.error('查询位置信息异常: ' + e)
				}
			})
		},
		fail: function (err) {
			console.log('获取定位异常: ' + err)
		},
		complete: () => {
			// uni.hideLoading()
		}
	}) 
}
// 设置经度纬度高度
function setLatLngAlt (latitude, longitude, altitude) {
	currLocation.value.latitude = latitude
	currLocation.value.longitude = longitude
	currLocation.value.altitude = altitude
}
// 设置位置信息
function setAddress (result) {
	const { address, address_component, pois } = result
	currLocation.value.addressInfo.fullname = address
	const { nation, province, city, district, street, street_number } = address_component
	currLocation.value.addressInfo.city = city
	currLocation.value.addressInfo.district = district
	currLocation.value.addressInfo.street = street
	// currLocation.value.addressInfo.streetNumber = street_number
	
	// 如果附近有poi信息，优先使用第一个作为显示
	if (pois && pois.length > 0) {
		const poi = pois[0]
		currLocation.value.addressInfo.poiName = poi.title
		console.log('找到附近POI:', poi.title);
	}else{
		//如果没有poi，则使用街道作为显示
		currLocation.value.addressInfo.poiName = street || district
		console.log('未找到POI，使用街道信息:', street);
	}
	
	// 清空不需要的字段
	currLocation.value.addressInfo.nation = ''
	currLocation.value.addressInfo.province = ''
}

// 获取显示的当前位置信息（优先显示具体标识）
function getCurrentPOI(location) {
	if (!location || !location.addressInfo) {
	    return '定位中...';
	  }
	  
	  // 1. 优先显示POI名称（如商场、店铺等具体标识）
	  if (location.addressInfo.poiName) {
	    return location.addressInfo.poiName;
	  }
	  
	  // 2. 其次显示街道名称
	  if (location.addressInfo.street) {
	    return location.addressInfo.street;
	  }
	  
	  // 3. 最后才显示区级信息作为兜底
	  if (location.addressInfo.district) {
	    return location.addressInfo.district;
	  }
	  
	  return '定位中...';
}

// 选择当前位置
function handlerSelectCurrent () {
	uni.navigateTo({
		// url: '/pages/index/search-location',
		url: `/pages/index/search-location?city=${currLocation.value.addressInfo.city}&currLocation=${JSON.stringify(currLocation.value)}&type=current`
	})
}

// 选择目的地
function handlerSelectTarget () {
	uni.navigateTo({
		// url: `/pages/index/search-location?city=${currLocation.value.addressInfo.city}&currLocation=${JSON.stringify(currLocation.value)}`
		url: `/pages/index/search-location?city=${currLocation.value.addressInfo.city}&currLocation=${JSON.stringify(currLocation.value)}&type=target`
	})
}
// 切换模式
function handlerChangeMode (md) {
	mode.value = md
}
// 选中新位置（当前位置 / 目的地）
function selectedNewLocation ({ location, dist, dura, price, type='target' }) {
	// 选择当前位置的话
	if(type === 'current'){
		//更新当前位置
		currLocation.value.location = location.location.lat
		currLocation.value.longitude = location.location.lng
		currLocation.value.addressInfo.fullname = location.title
		currLocation.value.addressInfo.streetNumber = location.address || ''
		
		currLocation.value.addressInfo.poiName = location.title
		
		// 如果已选择目的地，重新计算价格
		if(targetLocation.value.location) {
			recalculatePrice()
		}
	} else {
		// 选择目的地的话
		targetLocation.value = location
		distance.value = dist
		duration.value = dura
		distancePrice.value = price
	}
}

// 重新计算价格（当当前位置改变时）
function recalculatePrice() {
	if (!targetLocation.value.location) {
		return
	}
	
	MAP.direction({
		mode: 'driving',
		from: `${currLocation.value.latitude},${currLocation.value.longitude}`,
		to: `${targetLocation.value.location.lat},${targetLocation.value.location.lng}`,
		success: (res) => {
			const dist = res.result.routes[0].distance
			const dura = res.result.routes[0].duration
			calcPriceByDistance(Math.ceil(dist / 1000)).then(res => {
				const price = res.data.toFixed(1)
				distance.value = dist
				duration.value = dura
				distancePrice.value = price
			})
		},
		fail: (err) => {
			console.error('重新计算价格失败:', err)
		}
	})
}

// 更新提示信息
function updatePopupInfo (confirmText, content) {
	popupInfo.value.confirmText = confirmText
	popupInfo.value.content = content
}
// 提交订单
function handlerSubmit () {
	// 判断手机号是否填写
	if (!currentUser.getCurrentUser().phone) {
		uni.showModal({
			title: '提示',
			content: '您尚未填写手机号，请填写手机号后再下单',
			success: (res) => {
				if (res.confirm) {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				}
			}
		})
		return
	}
	// 校验目的地位置
	if (!targetLocation.value.location || !targetLocation.value.location.lat || !targetLocation.value.location.lng) {
		uni.showToast({
			title: '请先选择目的地',
			duration: 1500,
			mask: true,
			icon: 'none'
		})
		return
	}
	// 有正在进行中的订单
	if ([ orderTypeEnum.WAIT.code, orderTypeEnum.GET.code, orderTypeEnum.WAITING.code, orderTypeEnum.START.code, orderTypeEnum.PENDING_PAY.code ].includes(inProgressOrder.value.status)) {
		updatePopupInfo('查看详情', '您有一笔代驾订单正在进行中')
		dialogRef.value.open()
		return
	}
	saveOrder({
		currentLo: currLocation.value.longitude, // 经度
		currentLa: currLocation.value.latitude,  // 纬度
		currentAddr: currLocation.value.addressInfo.fullname,
		targetLo: targetLocation.value.location.lng,
		targetLa: targetLocation.value.location.lat,
		targetAddr: targetLocation.value.title,
		hopeTime: startDatetime.value === nowDatetime ? new Date().getTime() : new Date(startDatetime.value).getTime(),
		price: distancePrice.value * 1,
		userId: currentUser.getCurrentUser().id,
		userPhone: currentUser.getCurrentUser().phone,
		status: orderTypeEnum.WAIT.code
	}).then(res => {
		if (res.code === 444) {
			updatePopupInfo('立即支付', '您有一笔代驾订单未支付，请您支付后继续使用')
			dialogRef.value.open()
			return
		}
		uni.showToast({
			title: '下单成功',
			icon: 'none',
			success: () => {
				// 拿到订单信息
				initHaveInProgress().then(() => {
					// 跳转地图
					uni.navigateTo({
						url: `/pages/order/wait?id=${inProgressOrder.value.id}`
					})
				})
			}
		})
		
	}).catch(e => {
		console.error(e)
	})
}
// 点击弹窗的立即支付
function dialogConfirm () {
	initHaveInProgress().then(() => {
		// console.log(inProgressOrder.value)
		switch (inProgressOrder.value.status) {
			case orderTypeEnum.PENDING_PAY.code:
				uni.navigateTo({
					url: `/pages/order/pay?id=${inProgressOrder.value.id}`
				})
				break
			case orderTypeEnum.WAIT.code:
			case orderTypeEnum.GET.code:
			case orderTypeEnum.WAITING.code:
			case orderTypeEnum.START.code:
				uni.navigateTo({
					url: `/pages/order/wait?id=${inProgressOrder.value.id}`
				})
		}
	})
}

// 页面初次渲染完成
onMounted(() => {
	// 微信登录 检查是否注册
	wxLogin().then(() => {
		// 获取当前定位
		getCurrLocation()
		// 更新目的地
		uni.$on('selected-new-location', selectedNewLocation)
		// 监听用户取消订单
		uni.$on('user-update-order-status', ({ id, status }) => {
			if (id === inProgressOrder.value.id && [orderTypeEnum.CANCEL.code, orderTypeEnum.FINISH.code].includes(status)) {
				inProgressOrder.value = {}
				num.value = 0
			}
		})
	})
})

onShow(() => {
	getOnlineDriverCount().then(res => {
		driverCount.value = res.data
	})
})

onPullDownRefresh(() => {
	if (currentUser.getCurrentUser().id) {
		initHaveInProgress().then(() => {
			uni.stopPullDownRefresh()
		})
	} else {
		uni.stopPullDownRefresh()
	}
})
</script>

<style lang="scss" scoped>
view, button {
	box-sizing: border-box;
}
.container {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	
	/* 自定义头部栏================================ */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 180rpx; /* 小程序导航栏标准高度 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #f0f0f0;
		z-index: 9999;
		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			.navbar-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #BEAE59; 
				// text-align: center;
				margin-top: 100rpx;
			}
		}
	}
	/* 为内容区域添加顶部内边距 */
	.main-content {
		padding-top: 180rpx;
		height: calc(100vh - 10rpx);
		overflow-y: auto;
	}
	.mode-bar {
		width: 100vw;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.mode {
			.mode-item {
				margin-right: 40rpx;
			}
			.mode-item.selected {
				color: #000;
				font-weight: 600;
			}
		}
		.more {
			
		}
	}
	.content {
		padding: 20rpx 30rpx;
		background-color: #f8f8f8;
		.location-and-target {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			.call {
				font-size: 26rpx;
				text {
					color: #19afff;
				}
			}
			/* 代驾和跑腿模式================================= */
			.content-field {
				background-color: #ffffff;
				border-radius: 20rpx;
				.service-tabs {
					display: flex;
					gap: 0;
					margin-bottom: 20rpx;
				}
				.tab-item {
					flex: 1;
					text-align: center;
					padding: 20rpx 0;
					border-radius: 15rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					background-color: #f5f5f5;
					transition: all 0.2s ease;
					display: flex;
					align-items: center;
					justify-content: center;
					gap:12rpx;
					// 选中状态 白背 + 蓝字
					&.active {
						background-color: #fff;
						color: #3f89ff;
						box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.2);
						.iconfont {color: #3f89ff;}
					}
					&:active {transform: scale(0.98);}//点击反馈
					.iconfont {
						font-size: 50rpx;
					}
				}
			}
			/* ========================================================= */
			.location, .target {
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #f5f5f5;
				margin-top: 20rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {}
				.right {
					display: flex;
					justify-content: flex-end;
				}
				/* 代驾和跑腿 */
				
			}
			.card-foot {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				view {
					color: #666;
					font-size: 26rpx;
				}
			}
		}
		.price {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left, .right {
				display: flex;
				align-items: center;
			}
			.right {
				justify-content: flex-end;
			}
			.text {
				font-size: 26rpx;
				margin-right: 20rpx;
			}
			.num {
				font-size: 34rpx;
				font-weight: 600;
				margin-right: 20rpx;
				color: #e00;
			}
			.question {
				
			}
		}
		.curr-order {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				text-align: center;
				font-size: 24rpx;
			}
			.right {
				display: flex;
				justify-content: flex-end;
				font-size: 24rpx;
				&>view {
					margin-left: 16rpx;
				}
				.num {
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					font-size: 20rpx;
					background-color: #f00;
					color: #fff;
					border-radius: 50%;
				}
			}
		}
		.btn {
			margin-top: 30rpx;
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
			// background-color: rgba(10, 141, 255, 0.6);
			background: linear-gradient(135deg, #2196F3, #21CBF3);
			color: #fff;
			border-radius: 20rpx;
			font-size: 30rpx;
			transition: all 0.3s ease;
			&:active {
				// background-color: rgba(5, 134, 255, 0.8);
				background: linear-gradient(135deg, #1b8bf3, #1bc5f3);
			}
		}
		.more {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-top: 20rpx;
			width: 100%;
			height: 480rpx;
			display: flex;
			justify-content: space-between;
			gap: 12rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			.left {
				height: 100%;
				width: 50%;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 12rpx;
				.left-top, .left-bottom {
					width: 100%;
					height: 50%;
					background-color: #eee;
					// border-radius: 20rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.left-top {
					border-radius: 20rpx 0 0 0;
				}
				.left-bottom {
					border-radius: 0 0 0 20rpx;
				}
			}
			.right {
				height: 100%;
				width: 50%;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 12rpx;
				.right-top, .right-bottom {
					width: 100%;
					height: 50%;
					background-color: #eee;
					overflow: hidden;
					// border-radius: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.right-top {
					border-radius: 0 20rpx 0 0;
				}
				.right-bottom {
					border-radius: 0 0 20rpx 0;
				}
			}
		}
	}
}
</style>